<template>
  <div>
    <CheckboxGroup
      class="toggle-list"
      v-model="pageStatus"
      @on-change="routePageStatus"
      v-show="visible.toggleList"
    >
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.securityCameras">
          <Checkbox label="SecurityCameras">
            <i class="icon icon-camera"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">安防摄像头</div>
          <div class="subtitle">
            Security
            <br />Cameras
          </div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.personnel">
          <Checkbox label="Personnel">
            <i class="icon icon-personnel"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">人员</div>
          <div class="subtitle">Personnel</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.facility">
          <Checkbox label="Facility">
            <i class="icon icon-management-facility"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">设施</div>
          <div class="subtitle">Facility</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.vehicle">
          <Checkbox label="Vehicle">
            <i class="icon icon-vehicle"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">车辆</div>
          <div class="subtitle">Vehicle</div>
        </div>
      </Tooltip>
    </CheckboxGroup>
    <vw-right>
      <vw-row>
        <vw-box box-name="今日报警监测" box-type="train">
          <p  @click="smartManagement(smartManagementUrl.alarmMonitoringUrl)" class="alarmMonitoring">更多</p>
          <vw-box-item width="40%">
            <vc-icon-card
              icon-name="icon-warning-count"
              title="报警总数"
              :number="dataPanel.warningCount"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="20%">
            <vc-index-card title="未处理" :number="dataPanel.undone" color="#DCA027"></vc-index-card>
          </vw-box-item>
          <vw-box-item width="20%">
            <vc-index-card title="已派单" :number="dataPanel.send" color="#0080FF"></vc-index-card>
          </vw-box-item>
          <vw-box-item width="20%">
            <vc-index-card title="已解除" :number="dataPanel.resolved" color="#22A857"></vc-index-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="今日未处置任务" box-type="tower">
          <vw-box-item>
            <Table :columns="tableData.columns" :max-height="160 * ratio" :data="tableData.rows"></Table>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="人员管理" box-type="train">
          <div class="personnelManagement">
            <p  @click="smartManagement(smartManagementUrl.personnelManagementUrl1)">查看</p>
            <p  @click="smartManagement(smartManagementUrl.personnelManagementUrl2)">查询</p>
            <p  @click="smartManagement(smartManagementUrl.personnelManagementUrl3)">计划</p>
          </div>
          <vw-box-item width="40%">
            <vc-icon-card
              width="100%"
              icon-name="icon-worker"
              title="单兵总数"
              :number="dataPanel.workerAmount"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30%">
            <vc-index-card title="今日在岗" :number="dataPanel.workerOnDuty" color="#22A857"></vc-index-card>
          </vw-box-item>
          <vw-box-item width="30%">
            <vc-index-card title="异常报警" :number="dataPanel.workerAbnormal" color="#D81E00"></vc-index-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="车辆管理" box-type="train">
          <p  @click="smartManagement(smartManagementUrl.trafficManagement)" class="trafficManagement">交通管理</p>
          <vw-box-item width="40%">
            <vc-icon-card
              width="100%"
              icon-name="icon-truck"
              title="作业车辆"
              :number="dataPanel.vehicleAmount"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30%">
            <vc-index-card title="今日在岗" :number="dataPanel.vehicleOnDuty" color="#22A857"></vc-index-card>
          </vw-box-item>
          <vw-box-item width="30%">
            <vc-index-card title="异常报警" :number="dataPanel.vehicleAbnormal" color="#D81E00"></vc-index-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="设备管理" box-type="train">
          <vw-box-item width="40%">
            <vc-icon-card
              width="100%"
              icon-name="icon-gear"
              title="设备总数"
              :number="dataPanel.gearAmount"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30%">
            <vc-index-card title="今日在岗" :number="dataPanel.gearOnDuty" color="#22A857"></vc-index-card>
          </vw-box-item>
          <vw-box-item width="30%">
            <vc-index-card title="异常报警" :number="dataPanel.gearAbnormal" color="#D81E00"></vc-index-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="重点区域监控" box-type="tower">
          <p @click="smartManagement(smartManagementUrl.keyMonitoringUrl)" class="keyMonitoring">更多</p>
          <vw-box-item>
            <div class="carousel-wrapper">
              <Carousel
                autoplay
                loop
                arrow="never"
                v-model="carouselIndex.group1"
                :radius-dot="true"
                :height="200 * ratio"
              >
                <CarouselItem v-for="(item, index) in videoSrc.group1" :key="'vs1-' + index">
                  <vm-video-player
                    :src="item.url"
                    :width="424 * ratio"
                    :height="200 * ratio"
                    :title="item.title"
                  ></vm-video-player>
                </CarouselItem>
              </Carousel>
              <div class="title">
                {{
                videoSrc.group1[carouselIndex.group1].title
                }}
              </div>
              <button
                class="c-button icon-button"
                @click="
                                    popVideoWindow(
                                        videoSrc.group1[carouselIndex.group1]
                                            .url,
                                        videoSrc.group1[carouselIndex.group1]
                                            .title
                                    )
                                "
              >
                <i class="icon icon-fullscreen"></i>
              </button>
            </div>
          </vw-box-item>
        </vw-box>
      </vw-row>
    </vw-right>
  </div>
</template>

<script>
import bus from "@/lib/bus";
import { _Space, _POI } from "@/lib/vmixs";

import { uniFetcherManagement } from "@/request/uniFetcher.js";
export default {
  name: "",
  data() {
    return {
      //layout
      ratio: JSON.parse(localStorage.ratio),
      //interactive
      pageStatus: [],
      visible: {
        toggleList: true
      },
      //data
      warningCount: {
        securityCameras: 0,
        personnel: 0,
        facility: 0,
        vehicle: 0
      },
      dataPanel: {
        warningCount: 14,
        undone: 6,
        send: 6,
        resolved: 2,
        workerAmount: 13,
        workerOnDuty: 10,
        workerAbnormal: 3,
        vehicleAmount: 8,
        vehicleOnDuty: 3,
        vehicleAbnormal: 1,
        gearAmount: 15,
        gearOnDuty: 14,
        gearAbnormal: 1
      },
      tableData: {
        columns: [
          {
            title: "报警时间",
            key: "time"
          },
          {
            title: "类型",
            key: "type"
          },
          {
            title: "等级",
            key: "level"
          }
        ],
        rows: [
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          },
          {
            time: "2020-12-21 10:45",
            type: "非法越界",
            level: "五级"
          }
        ]
      },
      carouselIndex: {
        group1: 0
      },
      smartManagementUrl:{
        alarmMonitoringUrl:'htto://manage.zggyd.com/#/wisdowManageWeb',
        keyMonitoringUrl:'http://manage.zggyd.com/#/wisdowManageWeb',
        trafficManagement:"http://manage.zggyd.com/#/wisdowManageTraffic",
        personnelManagementUrl1:'https://mo.zggyd.com/gyd/inspection/route',
        personnelManagementUrl2:'https://mo.zggyd.com/gyd/inspection/route',
        personnelManagementUrl3:'https://mo.zggyd.com/gyd/inspection/plan',
      },
      videoSrc: {
        group1: [
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊1"
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊2"
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊3"
          }
        ]
      }
    };
  },
  mixins: [_Space, _POI],
  components: {
    "vw-top": () => import("../../layout/Top"),
    "vw-sphere": () => import("../../layout/Sphere"),
    "vc-index-card": () => import("../../components/IndexCard"),
    "vc-icon-card": () => import("../../components/IconCard"),
    "vm-video-player": () => import("../../components/media/VideoPlayer")
  },
  watch: {
    pageStatus: {
      handler(n, o) {
        if (n instanceof Array) {
          let pageStatusName = n[0];
          if (pageStatusName) {
            const statusHashMap = {
              SecurityCameras: this.setState_SecurityCameras,
              Personnel: this.setState_Personnel,
              Facility: this.setState_Facility,
              Vehicle: this.setState_Vehicle
            };
            statusHashMap[n].call();
          } else {
            //执行方法，页面回到初始状态
            this.setState_Initial();
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.declarePageName();
    this.listenWindowEvent();
    this.getManagementPanelCamera();
    this.getManagementTodayWarningList();
    this.getPanelManageCarAndPeopleList();
    this.getManageNoDisposeList();
  },
  methods: {
    declarePageName() {
      bus.$emit("set-sphere-actived", "Management");
    },

    // 智慧管理
    smartManagement(tz_url) {
      // console.log("dj_url",dj_url)
      bus.$emit("open-modal", {
        type: "web",
        url: tz_url
      });
    },
    // 重点区域监控
    getManagementPanelCamera() {
      uniFetcherManagement.getImportantCameraGroup(3).then(res => {
        if (res) {
          this.videoSrc.group1 = [];
          this.videoSrc.group1 = res;
          console.log(this.videoSrc.group1);
        }
      });
    },
    // 今日报警
    getManagementTodayWarningList() {
      uniFetcherManagement.getTodayWarningList().then(res => {
        if (res) {
          this.dataPanel.warningCount = parseInt(res.warningCount);
          (this.dataPanel.undone = parseInt(res.undone)),
            (this.dataPanel.send = parseInt(res.send)),
            (this.dataPanel.resolved = parseInt(res.resolved));
        }
      });
    },
    // 人员车辆设备
    getPanelManageCarAndPeopleList() {
      uniFetcherManagement.getPanelManageCarAndPeople().then(res => {
        if (res) {
          this.dataPanel.workerAmount = parseInt(res.workerAmount);
          (this.dataPanel.workerOnDuty = parseInt(res.workerOnDuty)),
            (this.dataPanel.workerAbnormal = parseInt(res.workerAbnormal)),
            (this.dataPanel.vehicleAmount = parseInt(res.vehicleAmount));
          this.dataPanel.vehicleOnDuty = parseInt(res.vehicleOnDuty);
          this.dataPanel.vehicleAbnormal = parseInt(res.vehicleAbnormal);
          this.dataPanel.gearAmount = parseInt(res.gearAmount);
          this.dataPanel.gearOnDuty = parseInt(res.gearOnDuty);
          this.dataPanel.gearAbnormal = parseInt(res.gearAbnormal);
        }
      });
    },
    // 未处置任务
    getManageNoDisposeList() {
      uniFetcherManagement.getManageNoDispose().then(res => {
        if (res) {
          this.tableData.rows = res.rows;
        }
      });
    },
    setState_Initial() {
      //清空场景内的POI，场景镜头聚焦
      bus.$emit("open-top");
      bus.$emit("open-sphere");
      bus.$emit("open-toolbar");
      this.InitCamera();
      this.ClearSpace();
      //this.clearUECreatures();
      //this.CameraObj.setOn(this.camera.init);
    },
    setState_SecurityCameras() {
      //清空场景内的POI，场景镜头聚焦
      this.ClearSpace();
      //this.clearUECreatures();
      this.RenderPOI(uniFetcherManagement.getCameraPOI);
      this.CameraObj.focusOn("POI");
      //this.CameraObj.setOn(this.camera.init);
    },
    setState_Personnel() {
      //清空场景内的POI，场景镜头聚焦
      this.ClearSpace();
      //this.clearUECreatures();
      this.RenderPOI(uniFetcherManagement.getWorkerPOI);
      this.CameraObj.focusOn("POI");
      //this.CameraObj.setOn(this.camera.init);
    },
    setState_Facility() {
      //清空场景内的POI，场景镜头聚焦
      this.ClearSpace();
      //this.clearUECreatures();
      this.RenderPOI(uniFetcherManagement.getFacilityPOI);
      this.CameraObj.focusOn("POI");
      //this.CameraObj.setOn(this.camera.init);
    },
    setState_Vehicle() {
      //清空场景内的POI，场景镜头聚焦
      this.ClearSpace();
      //this.clearUECreatures();
      this.RenderPOI(uniFetcherManagement.getVehiclePOI);
      this.CameraObj.focusOn("POI");
      //this.CameraObj.setOn(this.camera.init);
    },
    popVideoWindow(url, title) {
      bus.$emit("open-modal", {
        type: "video",
        url,
        title
      });
    },
    routePageStatus() {
      this.pageStatus = [this.pageStatus.tail()];
    },
    listenWindowEvent() {
      bus.$on("window-event", msg => {
        //监听“查看历史轨迹”或者“处置”按钮点击后的事件
        //条件逻辑
        //this.RenderPath('fake-promise','params');
        //bus.$emit('open-modal')
      });
    }
  }
};
</script>

<style lang="" scoped>
</style>